{% extends "repo/repo.html" %}

{% block subcontainer %}
<div class="issue-show inner bubble">
  <ul class="breadcrumb">
    <li><a href="/{{user_name}}/{{repo_name}}/issues/">问题</a><span class="divider">/</span></li>
    <li class="active"><span>#{{issue.id}}</span></li>
  </ul>
  <p class="hide">您没有添加评论的权限，请<a href="#">登陆</a></p>
  <div class="issue cIssue">
    <figure class="avatar">
      <img src="https://gravatar.com/avatar/{{issue.creator_userprofile.imgurl}}?s=55" alt="{{issue.creator_userprofile.username}}">
    </figure>
    <div class="detail">
      <h3 id="issueSubject" class="heading">{{issue.subject}} </h3>
      <p class="meta">
        <span class="label {%if issue.tracker_v == "缺陷"%}defect{%elif issue.tracker_v == "功能"%}feature{%elif issue.tracker_v == "支持"%}support{%endif%}">{{issue.tracker_v}}</span>
        {% if issue.status_v %}
          <span class="label label-warning">{{issue.status_v}}</span>
        {% endif %}
        {% if issue.priority_v %}
          <span class="label label-success">{{issue.priority_v}}</span>
        {% endif %}
        <span class="assign">
          <a href="/{{issue.creator_userprofile.username}}/">{{issue.creator_userprofile.username}}</a>指派给<a href="/{{issue.assigned_userprofile.username}}/">{{issue.assigned_userprofile.username}}</a>
        </span>
        <time class="unixtime" pubdate="pubdate">{{issue.create_time|date:"U"}}</time>
      </p>
      <div class="content">{{issue.content}}</div>
      <span class="actions">
        <a id="issueEdit" href="/{{user_name}}/{{repo_name}}/issues/edit/{{issue.id}}/" class="btn btn-mini"><i class="icon-pencil"></i>修改</a>
        <a href="#" data-id="{{issue.id}}" data-value="4" class="btn btn-mini btn-success">解决</a>
        <a href="#" data-id="{{issue.id}}" data-value="5" class="btn btn-mini">关闭</a>
        <a href="#" data-id="{{issue.id}}" data-value="6" class="btn btn-mini btn-danger">拒绝</a>
      </span>
    </div>
  </div>

{%if issue_comments%}
  {%for issue_comment in issue_comments%}
  <section data-user-name="{{issue_comment.commenter_userprofile.username}}" class="comment">
    <figure class="avatar">
      <img src="https://gravatar.com/avatar/{{ issue_comment.commenter_userprofile.imgurl }}?s=55" alt="{{issue_comment.commenter_userprofile.username}}">
    </figure>
    <div class="detail">
      <div class="meta">
        <a href="/{{issue_comment.commenter_userprofile.username}}/">{{issue_comment.commenter_userprofile.username}}</a>
        <time class="unixtime" pubdate="pubdate">{{issue_comment.create_time|date:"U"}}</time>
      </div>
      <div class="content">{{issue_comment.content}}</div>
      <div class="actions">
        <a class="rmComment hide" value="{{issue_comment.id}}" href="javascript:void(0)"><i class="icon-remove"></i>删除</a>
        <a class="refComment" href="javascript:void(0)" value="{{issue_comment.commenter_userprofile.username}}"><i class="icon-reply"></i>回复</a>
      </div>
    </div>
  </section>
  {%endfor%}
{%endif%}

  <div data-user-name="{{user.username}}" class="comment">
    <figure class="avatar">
      <img src="https://gravatar.com/avatar/{{userprofile.imgurl}}?s=55" alt="{{user.username}}">
    </figure>
    <form id="comment" class="detail" method="post">
      {% csrf_token %}
      <div id="commentContent" class="content">
        {{ issueCommentForm.content }}
        <p class="meta">评论不可修改</p>
        <button id="submit" class="btn btn-primary" type="submit">发表评论</button>
      </div>
    </form>
  </div>

  {%if total_page|length > 1%}
  <ul class="pagination">
  {%for i in total_page%}
    {%if i == page%}
    <li class="active"><a href="/{{user_name}}/{{repo_name}}/issues/{{issue.id}}/{{i}}/">{{i}}</a></li>
    {%else%}
    <li><a href="/{{user_name}}/{{repo_name}}/issues/{{issue.id}}/{{i}}/">{{i}}</a></li>
    {%endif%}
  {%endfor%}
  </ul>
  {%endif%}
</div>
{% endblock %}

{% block subjs %}
<script src="https://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.21/jquery-ui.min.js"></script>
<script>
  $(function(){
    {% if has_issue_modify_right %}
    $('.issue .data').live('mouseover mouseout', function(event) {
      if (event.type == 'mouseover') {
        $('#issueEdit').show();
      } else {
        $('#issueEdit').hide();
      }
    });
    {% endif %}

    $('.comment').live('mouseover mouseout', function(event) {
      if (event.type == 'mouseover') {
        var issues_user_name = $(this).attr('data-user-name');
        if('{{user.username}}' == '{{user_name}}' || issues_user_name == '{{user.username}}') {
          $(this).find('.rmComment').show();
        }
      } else {
        $(this).find('.rmComment').hide();
      }
    });

    $('.rmComment').click(function(){
      var comment_id = $(this).attr('value');
      $.ajax({
        url: '/{{user_name}}/{{repo_name}}/issues/comment/delete/' + comment_id + '/',
        type: 'POST',
        data: {csrfmiddlewaretoken: '{{ csrf_token }}'},
        dataType: 'json',
        timeout: 10000,
        error: function(){
        },
        success: function(json){
          window.location = '/{{user_name}}/{{repo_name}}/issues/{{issue.id}}/{{page}}/'
        },
      });
    });

    $('.rmComment').blur(function(){
      setTimeout(
        function(event) {
          $(this).hide();
        }
        , 300);
    });
    $('#submit').mouseover(function(){
      $('#commentContent').show();
      $('#id_content').focus();
    });
    $('#submit').click(function(){
      if($('#id_content').val() != '') {
        $(this).submit();
        return true;
      }
      return false;
    });
    $('.refComment').click(function(){
      var ref_username = $(this).attr('value');
      $('#id_content').val($('#id_content').val() + ' @' + ref_username + ' ');
      $('#commentContent').show();
      $('#id_content').focus();
      var val = $('#id_content').val();
      $('#id_content').val('')
      $('#id_content').val(val)
    });

    $('.cIssue .actions a').click(function(){
      var issue_id = $(this).attr('data-id');
      var issue_attr = 'status___' + $(this).attr('data-value');
      $.ajax({
        url: '/{{user_name}}/{{repo_name}}/issues/update/' + {{issue.id}} + '/' + issue_attr + '/',
        type: 'POST',
        data: {csrfmiddlewaretoken: '{{ csrf_token }}'},
        dataType: 'json',
        timeout: 10000,
        success: function(json){
          window.location = '/{{user_name}}/{{repo_name}}/issues/{{issue.id}}/{{page}}/'
        },
      });
    });

  });
</script>
{% endblock %}
